iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 12
0
Mobile Development

Android 到底能幹嘛 ?系列 第 12

[Day12] BottomNavigationView | 功能欄放底下才是最好看的

  • 分享至 

  • xImage
  •  

這次我們要製作畫面底下選單

首先在Gradle裡dependenciese加上這段

dependencies {
        implementation 'com.google.android.material:material:1.1.0-alpha10'
}

接著呢我們在想放上這選項列的Layout寫上我們加入的元件BottomNavigationView

Layout

<com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/navigation"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="#fff"
        app:itemHorizontalTranslationEnabled="false"
        app:labelVisibilityMode="labeled"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/fragment"
        app:menu="@menu/navigation_items" />

我這裡是使用ConstraintLayout 所以會需要約束上下左右
labelVisibilityMode 決定選項列文字的顯示
labeled - 一律顯示文字
unlabeled - 一律不顯示
selected - 選到Item時顯示

app:menu="@menu/navigation_items"
需要製作裡面的選項layout
於是我們新增一個xml

navigation_items

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:title="首頁"
        android:id="@+id/main"
        android:icon="@drawable/ic_launcher_foreground"

        />
    <item android:title="好友"
        android:icon="@drawable/ic_launcher_foreground"
        android:id="@+id/friend"
        />
    <item android:title="新聞"
        android:id="@+id/news"
        android:icon="@drawable/ic_launcher_foreground"
        />
    <item android:title="設定"
        android:id="@+id/setting"
        android:icon="@drawable/ic_launcher_foreground"
        />
</menu>

每一個Item都代表一個選項/按鈕
也可以設定它們個別的圖示(icon)

接下來我們只要燒錄就能看到我們成品囉!


上一篇
[Day11] RecyclerView應用
下一篇
[Day13] Menu | 聽起來很像菜單,並沒有
系列文
Android 到底能幹嘛 ?30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言